import { Component } from "react";
// connect是一个 react-readux提供的高阶组件
// connect的目的就是把redux全局共享的状态传递给你类组件
import { connect } from 'react-redux'




import { createAction4UpdateUserInfo } from '../store/acions';

class Login extends Component {
    constructor(props){
        super(props);
        console.log('login 当中获取的props',this.props);
        // 使用了connect 之后 类组件可以通过this.props来得到dispatch 
        // 通过 this.props.dispatch 分发一个action 给 redux
    }    

    updateUserInfo = ()=>{
        // this.props.dispatch(  createAction4UpdateUserInfo(
        //        { 
        //         name:'dixon',
        //          balance: 9
        //       }
        //    ) 
        // )

        createAction4UpdateUserInfo({name:'dixon',balance:7})
        // { type:'更新用户信息', payload: {name:'dixon',balance:7} }

        this.props.dispatch({
            type:'更新用户信息',
            //why 一定要使用payload 来传递参数??? 国际惯例
            payload: {
                name:'dixon',
                balance: 9
            }
        })
    }

    render(){
        return (
            <div>
                    <div>我是登录页面</div>
                    <button onClick={ this.updateUserInfo  }>修改用户信息</button>
            </div>
           
        )
    }
}

// map 遍历  State 状态 to 给  Props 自定属性
// mapStateToProps 拿出 redux当中的state传递给 类组件的props
const mapStateToProps = (state)=>{
    // 返回的内容就会挂载在 类组件的props上
    const { version,cart,...kfc } = state;
    return {...kfc}
}

//  connect(遍历state确定把什么state传递给类组件的函数)(类组件)
export default connect(mapStateToProps)(Login)